<template>
    <van-sticky>
        <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div style="margin-top: 1rem; padding: 0 1rem;" v-if="!formData.id">
        <van-cell-group v-for="i in 4" :key="i">
            <van-skeleton-paragraph row-width="90%" class="skeleton-item" />
        </van-cell-group>
    </div>
    <div style="margin-top: 1rem; padding: 0 1rem;" v-else>
        <van-field label="日期" v-model="formData.date" readonly />
        <van-field label="位置" v-model="formData.locationName" readonly />
        <van-field label="表计" v-model="formData.taskName" readonly />
        <van-field label="数据" v-model="formData.value" is-link />
    </div>

    <div class="image-container">
        <van-image v-if="imageSrc" :src="imageSrc" fit="contain" width="100%" height="300px" radius="8px"
            :show-loading="true" :show-error="true" @click="previewImage" />
        <div v-else-if="loadingImage" class="image-placeholder">
            <van-loading type="spinner" size="24px" />
            <div style="margin-top: 8px; font-size: 14px; color: #999;">加载中...</div>
        </div>
        <div v-else class="image-placeholder">
            <van-icon name="photo-o" size="48px" color="#ccc" />
            <div style="margin-top: 8px; font-size: 14px; color: #999;"></div>
        </div>
    </div>

    <div style="padding: 0 1rem;">
        <van-button type="primary" block color="#07c160" @click="verifyData">核验</van-button>
    </div>
    <van-image-preview v-model:show="showPreview" :images="[imageSrc]" :start-position="0" closeable />
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import bjclAPI from '@/api/bjcl';
import fileAPI from '@/api/file.js';
import { formatDate } from '@/utils/Format.js';

const router = useRouter();
const title = ref("表计核验");
const formData = ref({
    id: "",
    date: "",
    locationName: "",
    taskName: "",
    value: "",
    pictureId: ""
});


const imageSrc = ref('');
const loadingImage = ref(false);
const showPreview = ref(false);

const onClickLeft = () => {
    router.back();
};

const verifyData = () => {
    const submitData = {
        id: formData.value.id,
        value: formData.value.value,
    }
    bjclAPI.approvalDailyDianLiang(submitData).then((res) => {
        showSuccessToast('核验成功！');
        router.back();
    }).catch((error) => {
        errorNotify("BiaoJiHeYan.vue", "verifyData", error);
    });
};
const loadImage = async (pictureId) => {
    if (!pictureId) {
        imageSrc.value = '';
        loadingImage.value = false;
        return;
    }

    loadingImage.value = true;
    try {
        const res = await fileAPI.downloadFile(pictureId);
        const blobUrl = URL.createObjectURL(res.data);
        imageSrc.value = blobUrl;
    } catch (error) {
        errorNotify("BiaoJiHeYan.vue", "loadImage", error);
        imageSrc.value = '';
    } finally {
        loadingImage.value = false;
    }
};

const loadData = async () => {
    try {
        const id = new URLSearchParams(window.location.search).get("id");
        const res = await bjclAPI.getDailyData({ id: id });
        formData.value = res.data.htMeterReadingDaily;
        formData.value.date = formatDate(formData.value.date, 5);
        if (formData.value.pictureId) {
            await loadImage(formData.value.pictureId);
        }
    } catch (error) {
        errorNotify("BiaoJiHeYan.vue", "loadData", error);
    }
};

const previewImage = () => {
    if (imageSrc.value) {
        showPreview.value = true;
    }
};

onMounted(async () => {
    await loadData()
});
</script>

<style scoped>
:deep(.van-field) {
    width: calc(100vw - 2rem);
    border-radius: 8px;
    border: 1px solid #eee;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

:deep(.van-field:focus-within) {
    border-color: #1989fa;
    box-shadow: 0 0 0 2px rgba(25, 137, 250, 0.1);
}

:deep(.van-cell-group) {
    width: calc(100vw - 2rem);
    border-radius: 12px;
    border: 1px solid #eee;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    background-color: #ffffff;
}

.image-container {
    margin: 1rem;
    background-color: #f5f5f5;
    border-radius: 12px;
    text-align: center;
    padding: 0.5rem;
    transition: all 0.3s ease;
}

.image-container .van-image {
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-container .van-image:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 300px;
    background-color: #fafafa;
    border: 1px dashed #eee;
    border-radius: 8px;
    transition: all 0.3s ease;
}

:deep(.van-image__error) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
}

:deep(.van-image__loading) {
    background-color: #f5f5f5;
}

:deep(.van-image-preview__image) {
    object-fit: contain;
}

:deep(.van-image-preview__close-icon) {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
}

:deep(.van-button) {
    margin-top: 1rem;
    border-radius: 8px;
    height: 44px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
}

:deep(.van-button:active) {
    transform: translateY(1px);
    opacity: 0.9;
}

.skeleton-item {
    margin: 0.9rem 1rem 0.9rem 1rem;
    border-radius: 8px;
}
</style>